<html layout:decorator="layout/layout">
<head></head>
<body>
<div layout:fragment="content">
    <div class="tray tray-center">
        <!-- dashboard tiles -->
        <div class="row">
            <div class="col-sm-4 col-xl-3">
                <div class="panel panel-tile text-center br-a br-grey">
                    <div class="panel-body">
                        <h1 class="fs30 mt5 mbn" th:text="${servicesNum}">1,426</h1>
                        <h6 class="text-system">Total services</h6>
                    </div>
                    <div class="panel-footer br-t p12">
                      <span class="fs11">
                        <!--<i class="fa fa-arrow-up pr5"></i> 3% INCREASE <b>1W AGO</b>-->
                      </span>
                    </div>
                </div>
            </div>
            <div class="col-sm-4 col-xl-3">
                <div class="panel panel-tile text-center br-a br-grey">
                    <div class="panel-body">
                        <h1 class="fs30 mt5 mbn" th:text="${instancesNum}">63,262</h1>
                        <h6 class="text-success">Total Instances</h6>
                    </div>
                    <div class="panel-footer br-t p12">
                      <span class="fs11">
                        <!--<i class="fa fa-arrow-up pr5"></i> 2.7% INCREASE <b>1W AGO </b>-->
                      </span>
                    </div>
                </div>
            </div>
            <div class="col-sm-4 col-xl-3">
                <div class="panel panel-tile text-center br-a br-grey">
                    <div class="panel-body">
                        <h1 class="fs30 mt5 mbn">24</h1>
                        <h6 class="text-warning">Not Up Instances</h6>
                    </div>
                    <div class="panel-footer br-t p12">
                      <span class="fs11">
                        <!--<i class="fa fa-arrow-up pr5 text-success"></i> 1% INCREASE <b>1W AGO</b>-->
                      </span>
                    </div>
                </div>
            </div>
            <!--<div class="col-sm-3 col-xl-3 visible-xl">-->
                <!--<div class="panel panel-tile text-center br-a br-grey">-->
                    <!--<div class="panel-body">-->
                        <!--<h1 class="fs30 mt5 mbn">6,718</h1>-->
                        <!--<h6 class="text-danger">UNIQUE VISITS</h6>-->
                    <!--</div>-->
                    <!--<div class="panel-footer br-t p12">-->
                      <!--<span class="fs11">-->
                        <!--<i class="fa fa-arrow-down pr5 text-danger"></i> 6% DECREASE <b>1W AGO</b>-->
                      <!--</span>-->
                    <!--</div>-->
                <!--</div>-->
            <!--</div>-->
        </div>

    </div>
</div>
</body>
</html>